import React from "react";

interface ISvgProps {
    width?: string;
    height?: string;
}

const TextIcon = (props: ISvgProps): React.JSX.Element => {
    const {
        width = '0.875rem',
        height = '0.875rem'
    } = props;

    return (
        <>
            <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 15 14" fill="none">
                <path
                    d="M12.4068 0H1.62712C0.728475 0 0 0.728475 0 1.62712V12.3729C0 13.2715 0.728475 14 1.62712 14H12.4068C13.3054 14 14.0339 13.2715 14.0339 12.3729V1.62712C14.0339 0.728475 13.3054 0 12.4068 0ZM1.62712 1.08475H12.4068C12.7063 1.08475 12.9492 1.32758 12.9492 1.62712V12.3729C12.9492 12.6724 12.7063 12.9153 12.4068 12.9153H1.62712C1.32758 12.9153 1.08475 12.6724 1.08475 12.3729V1.62712C1.08475 1.32758 1.32758 1.08475 1.62712 1.08475Z"
                    fill="#3B3B3B"/>
                <path
                    d="M9.72515 3.88135C10.1804 3.88135 10.5518 4.2457 10.5592 4.69977L10.5593 4.71355V5.38982H9.47459V4.96609H7.56781V9.58908L8.41442 9.59172L8.41104 10.6765L5.62545 10.6678L5.62882 9.58304L6.48306 9.5857V4.96609H4.59323V5.38982H3.50848V4.71355C3.50848 4.2577 3.87535 3.88881 4.32891 3.88147L4.34267 3.88135H9.72515Z"
                    fill="#3B3B3B"/>
            </svg>
        </>
    );
};

const Display = (props: ISvgProps): React.JSX.Element => {
    const {
        width = '0.875rem',
        height = '0.875rem'
    } = props;

    return (
        <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 10" fill="none">
            <path
                d="M7 10C4.4333 10 2.14344 8.45733 0.135503 5.44367C0.0470018 5.31104 0 5.15715 0 5C0 4.84285 0.0470018 4.68896 0.135503 4.55633C2.14344 1.54267 4.4333 0 7 0C9.5667 0 11.8566 1.54267 13.8645 4.55633C13.953 4.68896 14 4.84285 14 5C14 5.15715 13.953 5.31104 13.8645 5.44367C11.8566 8.45733 9.5667 10 7 10ZM7 1C4.87517 1 2.90731 2.31017 1.09187 5C2.90731 7.68983 4.87517 9 7 9C9.12483 9 11.0927 7.68983 12.9081 5C11.0927 2.31017 9.12483 1 7 1ZM7 7.33333C5.63484 7.33333 4.52814 6.28867 4.52814 5C4.52814 3.71133 5.63484 2.66667 7 2.66667C8.36516 2.66667 9.47186 3.71133 9.47186 5C9.47186 6.28867 8.36516 7.33333 7 7.33333ZM7 6.33333C7.78014 6.33333 8.41259 5.73633 8.41259 5C8.41259 4.26367 7.78014 3.66667 7 3.66667C6.21986 3.66667 5.58741 4.26367 5.58741 5C5.58741 5.73633 6.21986 6.33333 7 6.33333Z"
                fill="#878787"/>
        </svg>
    );
};

const Hide = (props: ISvgProps): React.JSX.Element => {
    const {
        width = '0.875rem',
        height = '0.875rem'
    } = props;

    return (
        <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 8" fill="none">
            <path
                d="M6.41378 5.24973C5.87181 5.21188 5.34266 5.11693 4.83597 4.97084L3.78666 7.30021C3.75101 7.37883 3.70072 7.44938 3.63866 7.50782C3.5766 7.56625 3.50401 7.61142 3.42504 7.64073C3.34608 7.67004 3.26229 7.68291 3.17851 7.6786C3.09473 7.67429 3.01259 7.65288 2.93682 7.61562C2.78362 7.54169 2.66479 7.40815 2.60618 7.24402C2.54757 7.07988 2.55391 6.89844 2.62382 6.73912L3.6308 4.50338C2.77481 4.08661 2.01238 3.4893 1.39236 2.74971C0.934086 2.20145 0.574752 1.57236 0.331501 0.892456C0.302527 0.810576 0.289414 0.723589 0.292912 0.636462C0.296409 0.549335 0.316449 0.463774 0.351886 0.384665C0.387323 0.305555 0.437464 0.234447 0.499446 0.175399C0.561428 0.116352 0.634037 0.0705207 0.713127 0.040524C0.792217 0.0105273 0.87624 -0.00304809 0.960398 0.000572893C1.04456 0.00419388 1.1272 0.0249406 1.20361 0.061628C1.28003 0.0983155 1.34871 0.150225 1.40575 0.214394C1.46278 0.278562 1.50705 0.353733 1.53603 0.435614C1.72657 0.966166 2.00769 1.45693 2.36598 1.8845C3.42684 3.16472 5.11625 3.94162 6.96088 3.94162C8.80616 3.94162 10.4956 3.16406 11.5564 1.8845C11.9147 1.45693 12.1958 0.966166 12.3864 0.435614C12.4449 0.270248 12.5645 0.135722 12.7188 0.061628C12.8731 -0.0124656 13.0496 -0.0200571 13.2093 0.040524C13.369 0.101105 13.499 0.224896 13.5705 0.384665C13.6421 0.544433 13.6494 0.727091 13.5909 0.892456C13.3477 1.57236 12.9883 2.20145 12.5301 2.74971C12.4394 2.85912 12.3453 2.96542 12.2478 3.06844L13.8167 4.69262C13.935 4.81756 14.0008 4.98577 14 5.16071C13.9992 5.33565 13.9317 5.50318 13.8122 5.62689C13.7533 5.68869 13.6832 5.73785 13.606 5.77154C13.5287 5.80524 13.4457 5.8228 13.3619 5.82324C13.2781 5.82367 13.195 5.80696 13.1174 5.77406C13.0398 5.74116 12.9692 5.69273 12.9098 5.63154L11.2614 3.92502C10.9535 4.14414 10.6264 4.3387 10.2839 4.50736L11.2896 6.73845C11.3597 6.89784 11.3662 7.07946 11.3075 7.24375C11.2489 7.40804 11.13 7.5417 10.9766 7.61562C10.9008 7.65288 10.8187 7.67429 10.7349 7.6786C10.6511 7.68291 10.5674 7.67004 10.4884 7.64073C10.4094 7.61142 10.3368 7.56625 10.2748 7.50782C10.2127 7.44938 10.1624 7.37883 10.1268 7.30021L9.07875 4.97283C8.62653 5.10278 8.16393 5.19034 7.69656 5.23446V7.26767C7.69503 7.44274 7.62679 7.61011 7.50667 7.73334C7.38655 7.85658 7.22428 7.92572 7.05517 7.92571C6.69856 7.92571 6.41378 7.63089 6.41378 7.26834V5.24973Z"
                fill="#878787"/>
            <path
                d="M2.00615 2.80611C2.06557 2.74487 2.13609 2.69639 2.21366 2.66344C2.29123 2.63048 2.37432 2.61371 2.45816 2.61408C2.54201 2.61445 2.62495 2.63196 2.70225 2.66559C2.77954 2.69923 2.84966 2.74834 2.90858 2.81009C3.02825 2.93383 3.09586 3.1015 3.0967 3.2766C3.09754 3.4517 3.03154 3.62006 2.91307 3.74503L1.09089 5.6315C1.03141 5.69279 0.960813 5.74131 0.883163 5.77426C0.805512 5.80722 0.722337 5.82396 0.638416 5.82353C0.554496 5.8231 0.471485 5.8055 0.394155 5.77174C0.316825 5.73799 0.246701 5.68875 0.187813 5.62685C0.0683385 5.50313 0.00084863 5.33561 7.94845e-06 5.16067C-0.000832733 4.98573 0.0650437 4.81752 0.183323 4.69258L2.00615 2.80544V2.80611Z"
                fill="#878787"/>
        </svg>

    );
};

export {TextIcon};
export {Display};
export {Hide};
